<template>
  <div class="wrapper bg">
    <div class="wra-left">
      <el-menu
          class="el-menu-vertical-demo"
          text-color="#000"
          router
          unique-opened
        >
          <el-menu-item
            class="menU"
            :index="items.path"
            v-for="(items, index) in titleList.children"
            :key="index"
          >
            <div class="menuH">
              <span v-for="icon in iconList" :key="icon.id" class="iconMenu">
                <i class="iconfont" v-if="icon.title == items.authName">{{icon.unicode}}</i>
              </span>
              <span class="menuItem">{{ items.authName }}</span>
            </div>
          </el-menu-item>
      </el-menu>
      <div class="recommend">
        <ul>
          <li><a href="#">内推招聘广场</a></li>
          <li><a href="#">技术交流圈</a></li>
          <li><a href="#">掘友请回答</a></li>
          <li><a href="#">树洞一下</a></li>
          <li><a href="#">上班摸鱼</a></li>
          <li><a href="#">更多</a></li>
        </ul>
      </div>
    </div>
    <div class="wra-lolo">
      <centre-wrap></centre-wrap>
    </div>
    <div class="wra-right">
        <div class="resume">
          <div class="common-flex profile">
            <el-avatar :size="50" :src="state.circleUrl" />
            <div class="user">
              <span>{{store.state.user.profile.nick_name}}</span>
            </div>
          </div>
          <div class="mess">
            <el-col v-for="item in tabData" :key="item.id">
              <a href="#" >
                <div class="typeNum">{{item.typeNum}}</div>
                <div class="titleName">{{item.titleName}}</div>
              </a>
            </el-col>
          </div>
        </div>
        <div class="sift">
          <p class="common-flex sift-p">精选沸点</p>
          <div class="sift-list">
            <el-col v-for="(items,index) in siftData" :key="index">
              <a href="#" >
                <div class="sift-list-text">
                  <p class="siftName">{{items.siftName}}</p>
                  <p class="siftNum">{{items.siftNum}}</p>
                </div>
                <img v-if="items.img" :src="items.img">
              </a>
            </el-col>
          </div>
        </div>
        <div class="siky">
          <div class="topic">
            <p class="common-flex sift-p">热门话题
              <span>
                <i class="iconfont icon-biaoqing"></i>
                换一换
              </span>
            </p>
            <div class="topic-list">
              <el-col v-for="(item,index) in topicData" :key="index">
                <a href="#">
                  <p class="topic-p">
                    <img v-if="item.img" :src="item.img" alt="">
                    <img v-if="item.imgr" :src="item.imgr" alt="">
                    <span>{{item.topic}}</span>
                  </p>
                  <p class="hot">{{numConvert(item.hot)}}</p>
                </a>
              </el-col>
            </div>
            <a href="#" class="more">
              查看更多 &nbsp; &gt;
            </a>
          </div>
          <a href="#" class="play">
            如何玩转沸点
          </a>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive, onMounted,getCurrentInstance,watch } from "vue";
import { useRoute,useRouter } from 'vue-router';
import centreWrap from "@/views/pins/components/centre.vue";
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
const router = useRouter();
const {proxy} =getCurrentInstance();
const iconList = ref([
  {
    id:'001',
    title:'最新',
    unicode:'\ue8b1',
  },
  {
    id:'002',
    title:'热门',
    unicode:'\ue638',
  },
  {
    id:'003',
    title:'关注',
    unicode:'\ue605',
  },
  {
    id:'004',
    title:'我的圈子',
    unicode:'\ue606',
  },
  {
    id:'004',
    title:'推荐圈子',
    unicode:'\ue657',
  },
]);
const title = ref([
  "最新",
  "热门",
  "关注",
  "我的圈子",
  "推荐圈子",
]);
const titleList = ref({
  children: [
    {
      id: 146,
      authName: "最新",
      path: "",
      children: [],
    },
    {
      id: 147,
      authName: "热门",
      path: "",
    },
    {
      id: 148,
      authName: "关注",
      path: "",
      children: [],
    },
    {
      id: 149,
      authName: "我的圈子",
      path: "",
    },
    {
      id: 150,
      authName: "推荐圈子",
      path: "",
      children: [
        {
          id: 150-1,
          authName: "内推招聘广场",
          path: "",
        },
        {
          id: 150-2,
          authName: "技术交流圈",
          path: "",
        },
        {
          id: 150-3,
          authName: "掘友请回答",
          path: "",
        },
        {
          id: 150-4,
          authName: "树洞一下",
          path: "",
        },
        {
          id: 150-5,
          authName: "上班摸鱼",
          path: "",
        },
        {
          id: 150-6,
          authName: "更多",
          path: "",
        },
      ],
    },
  ],
});

// 头像
const state = reactive({
  circleUrl:
    'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
})

const tabData = ref(
  [
    {
      id:1,
      typeNum:0,
      titleName:'沸点',
    },
    {
      id:2,
      typeNum:0,
      titleName:'圈子',
    },
    {
      id:3,
      typeNum:0,
      titleName:'关注',
    },
    {
      id:4,
      typeNum:0,
      titleName:'关注者',
    },
  ]
)

const siftData = ref(
  [
    {
      siftName:'沸点不止摸鱼，还能帮你解决问题！遇到问题怎么办？快来「掘友请回答」交流分享，让掘友帮帮忙，一起找到答案～',
      siftNum:'74赞 · 225评论',
      img:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d589734a85f04347b2714dbe9955850e~tplv-k3u1fbpfcp-watermark.image?'
    },
    {
      siftName:'掘友帮帮忙...',
      siftNum:'74赞 · 225评论',
      img:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d589734a85f04347b2714dbe9955850e~tplv-k3u1fbpfcp-watermark.image?'
    },
    {
      siftName:'沸点不止摸鱼，还能帮你解决问题！遇到问题怎么办？快来「掘友请回答」交流分享，让掘友帮帮忙，一起找到答案～',
      siftNum:'74赞 · 225评论',
    },
  ]
)

const topicData = ref(
  [
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      topic:'#这神转折真掘了#',
      hot:100000,
    },
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      imgr:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/lottery.b40d80b.png',
      topic:'#这神转折真掘了#',
      hot:29834,
    },
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      topic:'#这神转折真掘了#',
      hot:1233,
    },
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      topic:'#这神转折真掘了#',
      hot:4567,
    },
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      topic:'#这神转折真掘了#',
      hot:6789,
    },
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      topic:'#这神转折真掘了#',
      hot:89000,
    },
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      topic:'#这神转折真掘了#',
      hot:2343466,
    },
    {
      img:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/rec.476fe07.png',
      topic:'#这神转折真掘了#',
      hot:134,
    },
    {
      topic:'#这神转折真掘了#',
      hot:43535,
    },
    {
      topic:'#这神转折真掘了#',
      hot:909090,
    },
  ]
)

const pickerData = ref(
  [
    {
      unicode:'\ue600',
      picker:'表情'
    },
    {
      unicode:'\ue8d2',
      picker:'图片'
    },
    {
      unicode:'\ue61c',
      picker:'链接'
    },
    {
      unicode:'\ue8b1',
      picker:'话题'
    },
  ]
)

const commentData = ref(
  [
    {
      commName:'HoMeTown',
      img:'	https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f597b88d22ce5370bd94495780459040.svg',
      pic:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ff0a2d0c92fad7a035ebfedf03dbfde4.svg',
      commPost:'前端开发 @ 众耳',
      commTime:'2分钟前',
      commConent:'混经验',
      commReve:1,
      commClos:0,
    },{
      commName:'HoMeTown',
      img:'	https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f597b88d22ce5370bd94495780459040.svg',
      pic:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ff0a2d0c92fad7a035ebfedf03dbfde4.svg',
      commPost:'前端开发 @ 众耳',
      commTime:'2分钟前',
      commConent:'混经验',
      commReve:1,
      commClos:0,
    }
  ]
) 
// 骨架屏
const skeletonBlooern = ref(true)

const userData = ref(
  [
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      img:[
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      ],
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      reviewNmu:7,
      hotText:'快别说了，感动的眼泪都下来了',
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      share:'分享',
      review:10,
      like:31,
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      img:[
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
        'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
      ],
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      reviewNmu:7,
      hotText:'快别说了，感动的眼泪都下来了',
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      reviewNmu:7,
      hotText:'快别说了，感动的眼泪都下来了',
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      img:[
        'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fd6193533504b95b839286f3ebea5b8~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp?',
      ],
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      reviewNmu:7,
      hotText:'快别说了，感动的眼泪都下来了',
      isClose:false,
      isOver:false,
      textStatus:'',
    },
    {
      userName:'大旭旭',
      occupa:'前端 · ',
      time:'18分钟',
      conent:'还不能辞剧大部分绝大部分健康大部分经济补偿金甲方',
      img:[
        'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fd6193533504b95b839286f3ebea5b8~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.awebp?',
      ],
      circle:'掘友请回答',
      share:'分享',
      review:10,
      like:31,
      reviewNmu:7,
      hotText:'快别说了，感动的眼泪都下来了',
      isClose:false,
      isOver:false,
      textStatus:'',
    },
  ]
)

// 文章展开收起
const height = userData.value.map((item)=>{
  return item.conent.length
})
height.forEach((item,index)=>{
  if (height[index] > 85) {
    userData.value[index].isOver = true;
    userData.value[index].textStatus = '展开';
    userData.value[index].isClose = true;
  }
})
const changeStatus = (index) => {
  if (userData.value[index].textStatus === '展开') {
    userData.value[index].textStatus = '收起';
    userData.value[index].isClose = false;
  } else if (userData.value[index].textStatus === '收起') {
    userData.value[index].textStatus = '展开'
    userData.value[index].isClose = true
  }
}

// 图片
const srcList = ref([
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
  'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image',
])

// 数据处理
function numConvert(num) {
  if (num >= 10000) {
    return Math.round(num / 1000) / 10 + "W+";
  } else if (num >= 1000) {
    return Math.round(num / 100) / 10 + "K+";
  } else {
    return num;
  }
}
//显示表情
const isDisplay=ref(false)
const handleBoxA=()=>{
  isDisplay.value=true
}

const handleBoxA2=()=>{
  isDisplay.value=false
}
const iscc =ref(false);
const btnFunce = () => {
  iscc.value =  !iscc.value
}





</script>

<style scoped>
.common-flex{
  display: flex;
  align-items: center;
}
img{
  width: auto;
  height: auto;
  border-style: none;
}
.bg{
  margin-top: 20px;
  display: flex;
  gap: 20px;
}

.wra-left {
  width: 15%;
  height: 570px;
  background-color: #fff;
  position: sticky;
  top: 0;
}
.wra-lolo{
  width: 62%;
}
.wra-right {
    width: 23%;
}
.menuItem{
  font-size: 16px;
  color: #252933;
  margin-left: 5px;
}

.iconMenu i{
  font-size: 16px;
  color: #252933;
}
.el-menu-vertical-demo{
  padding: 10px;
  border-right: 0px !important;
}
.menU:hover{
  background-color: #f7f8fa;
  
}
.menU:hover .iconMenu i{
  color: #1e80ff;
}
.menU:hover .menuItem{
  color: #1e80ff;
}
.menU:active{
  color: #1e80ff;
  background-color: #eaf2ff !important;
}
.recommend ul li{
  cursor: pointer;
  line-height: 44px;
}
.recommend ul li a{
  font-size: 14px;
  color: #8a919f;
  margin-left: 40px;
}
.recommend ul li:hover{
  background-color: #f7f8fa;
}
.recommend ul li:hover a{
  color: #1e80ff;
}

.resume{
  border-radius: 5px;
  background-color: #fff;
}
.profile{
  padding: 24px 0;
  margin: 0 20px;
  border-bottom: 1px #ddd solid;
  cursor: pointer;
}

.user{
  margin-left: 15px;
}
.mess{
  display: flex;
  padding: 20px 0;
  margin: 0 20px;
}
.mess a{
  display: block;
  width: 20px;
}
.mess a div{
  display: block;
  max-width: 50px;
  min-width: 50px;
}
.typeNum{
  color: #252933;
  font-size: 16px;
}
.titleName {
  color: #8a919f;
  font-size: 14px;
}
.el-col-24{
  flex: 1 !important;
}

.sift{
  border-radius: 5px;
  margin-top: 15px;
  background-color: #fff;
}

.sift-p{
  justify-content: space-between;
  line-height: 56px;
  padding: 0 20px;
  font-weight: 500;
  font-size: 16px;
  color: #1d2129;
  border-bottom: 1px #e4e6eb solid;
  margin: 0;
}

.sift-list{
  padding: 8px 12px;
}

.sift-list a{
  display: flex;
  margin: initial;
  margin-top: 10px;
  padding: 8px;
}
.sift-list-text{
  flex: 1;
}

.sift-list a img{
  margin-left: 16px;
  width: 64px;
  height: 64px;
  border-radius: 4px;
}
.siftName{
  color: #515767;
  font-size: 14px;
  line-height: 24px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.siftNum{
  color: #8a919f;
  line-height: 20px;
  font-size: 12px;
  padding-top: 4px;
}

.sift-list a:hover{
  background-color: #f7f8fa;
}

.sift-list a:hover .siftName{
  color: #007fff;
}

.siky{
  position: sticky;
  top: 0;
}

.topic{
  background-color: #fff;
  border-radius: 4px;
  margin-top: 16px;
}

.sift-p span{
  font-size: 14px;
  line-height: 20px;
  color: #8a919f;
  cursor: pointer;
}

.topic-list{
  padding: 16px 20px;
}

.topic-list a{
  display: flex;
  justify-content: space-between;
  height: 22px;
  margin-bottom: 12px;
  align-items: center;
}
.topic-p{
  flex-grow: 1;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.topic-p img{
  width: 16px;
  height: 16px;
  margin-bottom: 2px;
  margin-left: 2px;
  vertical-align: middle;
}

.topic-p span{
  font-size: 14px;
  margin-left: 5px;
  color: #515767;
  word-break: break-all;
}

.topic-p:hover span{
  color: #1e80ff;
}

.hot{
  flex-shrink: 0;
  font-size: 12px;
  color: #8a919f;
  padding-left: 30px;
}

.more{
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #8a919f;
  cursor: pointer;
  margin: 0 20px;
  border-top: 1px solid #e4e6eb;
}

.play{
  background-image: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/guide.1535752.png);
  display: block;
  line-height: 72px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  padding-left: 108px;
  color: #515767;
  margin-top: 20px;
  background-color: #fff;
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: 33px -1px;
}
</style>
